<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="renderer" content="webkit">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<link rel="icon" href="/favicon.ico">
		<title>和盛华办公管理系统</title>
		<!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
		<style>
			@import url(http://fonts.googleapis.com/css?family=Lato:100,300,700);
			html,
			body,
			#app {
				height: 100%;
				margin: 0px;
				padding: 0px;
			}

			
			#loader-wrapper{
				background: #ffc2c0;
				height: 100%;
				width: 100%;
				margin: 0px;
				padding: 0px;
				position: absolute;
				top: 0
				
			}
			#container {
				width: 340px;
				margin: 400px auto;

			}
			

			#container h1 {
				font-family: 'Lato';
				color: white;
				text-transform: uppercase;
				font-size: 1em;
				letter-spacing: 1.5px;
				text-align: center;
				width: 320px;
				margin-top: 20px;
				-webkit-animation: fade 2s infinite;
				-moz-animation: fade 2s infinite;
			}

			.stick {
				width: 60px;
				height: 6px;
				background: white;
				display: inline-block;
				margin-left: -8px;
			}

			.stick:nth-child(n) {
				transform: rotate(30deg);
				-ms-transform: rotate(30deg);
				/* IE 9 */
				-webkit-transform: rotate(30deg);
				/* Safari and Chrome */
				-moz-transform: rotate(30deg);
				-webkit-animation: fall 2s infinite;
				-moz-animation: fall 2s infinite;
			}

			.stick:nth-child(2n) {
				transform: rotate(-30deg);
				-ms-transform: rotate(-30deg);
				/* IE 9 */
				-webkit-transform: rotate(-30deg);
				/* Safari and Chrome */
				-moz-transform: rotate(-30deg);
				-webkit-animation: rise 2s infinite;
				-moz-animation: rise 2s infinite;
			}

			@-webkit-keyframes rise {
				50% {
					transform: rotate(30deg);
					-ms-transform: rotate(30deg);
					/* IE 9 */
					-webkit-transform: rotate(30deg);
					-moz-transform: rotate(30deg);
				}
			}

			@-moz-keyframes rise {
				50% {
					transform: rotate(30deg);
					-ms-transform: rotate(30deg);
					/* IE 9 */
					-webkit-transform: rotate(30deg);
					-moz-transform: rotate(30deg);
				}
			}

			@-o-keyframes rise {
				50% {
					transform: rotate(30deg);
					-ms-transform: rotate(30deg);
					/* IE 9 */
					-webkit-transform: rotate(30deg);
					-moz-transform: rotate(30deg);
				}

				
			}
			@keyframes rise {
				50% {
					transform: rotate(30deg);
					-ms-transform: rotate(30deg);
					/* IE 9 */
					-webkit-transform: rotate(30deg);
					-moz-transform: rotate(30deg);
				}
			}
			@-webkit-keyframes fall {
				50% {
					transform: rotate(-30deg);
					-ms-transform: rotate(-30deg);
					/* IE 9 */
					-webkit-transform: rotate(-30deg);
					-moz-transform: rotate(30deg);
				}
			}

			@-moz-keyframes fall {
				50% {
					transform: rotate(-30deg);
					-ms-transform: rotate(-30deg);
					/* IE 9 */
					-webkit-transform: rotate(-30deg);
					-moz-transform: rotate(-30deg);
				}
			}

			@-o-keyframes fall {
				50% {
					transform: rotate(-30deg);
					-ms-transform: rotate(-30deg);
					/* IE 9 */
					-webkit-transform: rotate(-30deg);
					-moz-transform: rotate(30deg);
				}

				
			}
			@keyframes fall {
				50% {
					transform: rotate(-30deg);
					-ms-transform: rotate(-30deg);
					/* IE 9 */
					-webkit-transform: rotate(-30deg);
					-moz-transform: rotate(30deg);
				}
			}
			@-webkit-keyframes fade {
				50% {
					opacity: 0.5;
				}

				100% {
					opacity: 1;
				}
			}

			@-moz-keyframes fade {
				50% {
					opacity: 0.5;
				}

				100% {
					opacity: 1;
				}
			}

			@-o-keyframes fade {
				50% {
					opacity: 0.5;
				}

				100% {
					opacity: 1;
				}

				
			}
			@keyframes fade {
				50% {
					opacity: 0.5;
				}

				100% {
					opacity: 1;
				}
			}
		</style>
	</head>

	<body>
		<div id="app">
			<div id="loader-wrapper">
				<div id="container">
					<div class="stick"></div>
					<div class="stick"></div>
					<div class="stick"></div>
					<div class="stick"></div>
					<div class="stick"></div>
					<div class="stick"></div>

					<h1>Loading...</h1>

				</div>

			</div>

		</div>
		<script type="module" src="/src/main.js"></script>
	</body>

</html>
